<template>
  <div class="single-prediction-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="page-title">单客户预测</div>
    </div>

    <el-row :gutter="20">
      <!-- 左侧表单 -->
      <el-col :xs="24" :sm="24" :md="12">
        <el-card shadow="hover" class="form-card">
          <template #header>
            <div class="card-header">
              <span>客户信息输入</span>
              <div class="header-actions">
                <el-button size="small" type="warning" @click="resetForm">重置</el-button>
                <el-button size="small" type="success" @click="fillDemoData">填充演示数据</el-button>
              </div>
            </div>
          </template>

          <el-form 
            ref="predictionForm" 
            :model="formData" 
            label-width="120px" 
            :rules="formRules"
          >
            <el-form-item label="客户ID" prop="customerID">
              <el-input v-model="formData.customerID" placeholder="输入客户ID"></el-input>
            </el-form-item>

            <el-form-item label="性别" prop="gender">
              <el-radio-group v-model="formData.gender">
                <el-radio label="Male">男</el-radio>
                <el-radio label="Female">女</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="老年客户" prop="seniorCitizen">
              <el-switch 
                v-model="formData.seniorCitizen" 
                active-text="是" 
                inactive-text="否"
                :active-value="1"
                :inactive-value="0"
              ></el-switch>
            </el-form-item>

            <el-form-item label="伴侣" prop="partner">
              <el-radio-group v-model="formData.partner">
                <el-radio label="Yes">有</el-radio>
                <el-radio label="No">无</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="经济独立" prop="dependents">
              <el-radio-group v-model="formData.dependents">
                <el-radio label="Yes">是</el-radio>
                <el-radio label="No">否</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="使用时长(月)" prop="tenure">
              <el-slider 
                v-model="formData.tenure" 
                :min="0" 
                :max="72" 
                :step="1" 
                show-input
              ></el-slider>
            </el-form-item>

            <el-form-item label="电话服务" prop="phoneService">
              <el-radio-group v-model="formData.phoneService">
                <el-radio label="Yes">有</el-radio>
                <el-radio label="No">无</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="多线服务" prop="multipleLines" v-if="formData.phoneService === 'Yes'">
              <el-radio-group v-model="formData.multipleLines">
                <el-radio label="Yes">有</el-radio>
                <el-radio label="No">无</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="互联网服务" prop="internetService">
              <el-radio-group v-model="formData.internetService">
                <el-radio label="DSL">DSL</el-radio>
                <el-radio label="Fiber optic">光纤</el-radio>
                <el-radio label="No">无</el-radio>
              </el-radio-group>
            </el-form-item>

            <template v-if="formData.internetService !== 'No'">
              <el-form-item label="在线安全服务" prop="onlineSecurity">
                <el-radio-group v-model="formData.onlineSecurity">
                  <el-radio label="Yes">有</el-radio>
                  <el-radio label="No">无</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="在线备份" prop="onlineBackup">
                <el-radio-group v-model="formData.onlineBackup">
                  <el-radio label="Yes">有</el-radio>
                  <el-radio label="No">无</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="设备保护" prop="deviceProtection">
                <el-radio-group v-model="formData.deviceProtection">
                  <el-radio label="Yes">有</el-radio>
                  <el-radio label="No">无</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="技术支持" prop="techSupport">
                <el-radio-group v-model="formData.techSupport">
                  <el-radio label="Yes">有</el-radio>
                  <el-radio label="No">无</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="流媒体电视" prop="streamingTV">
                <el-radio-group v-model="formData.streamingTV">
                  <el-radio label="Yes">有</el-radio>
                  <el-radio label="No">无</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="流媒体电影" prop="streamingMovies">
                <el-radio-group v-model="formData.streamingMovies">
                  <el-radio label="Yes">有</el-radio>
                  <el-radio label="No">无</el-radio>
                </el-radio-group>
              </el-form-item>
            </template>

            <el-form-item label="合同类型" prop="contract">
              <el-radio-group v-model="formData.contract">
                <el-radio label="Month-to-month">月付</el-radio>
                <el-radio label="One year">一年期</el-radio>
                <el-radio label="Two year">两年期</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="电子账单" prop="paperlessBilling">
              <el-radio-group v-model="formData.paperlessBilling">
                <el-radio label="Yes">是</el-radio>
                <el-radio label="No">否</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="支付方式" prop="paymentMethod">
              <el-select v-model="formData.paymentMethod" placeholder="请选择支付方式" style="width: 100%;">
                <el-option label="电子支票" value="Electronic check"></el-option>
                <el-option label="邮寄支票" value="Mailed check"></el-option>
                <el-option label="银行转账(自动)" value="Bank transfer (automatic)"></el-option>
                <el-option label="信用卡(自动)" value="Credit card (automatic)"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="月费用" prop="monthlyCharges">
              <el-input-number 
                v-model="formData.monthlyCharges" 
                :min="0" 
                :max="200" 
                :step="1"
                style="width: 100%;"
              ></el-input-number>
            </el-form-item>

            <el-form-item label="总费用" prop="totalCharges">
              <el-input-number 
                v-model="formData.totalCharges" 
                :min="0" 
                :step="1"
                style="width: 100%;"
                :disabled="autoTotalCharges"
              ></el-input-number>
              <div class="auto-calc">
                <el-checkbox v-model="autoTotalCharges">自动计算</el-checkbox>
              </div>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm">进行预测</el-button>
              <el-button @click="resetForm">重置表单</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>

      <!-- 右侧结果区域 -->
      <el-col :xs="24" :sm="24" :md="12">
        <el-card shadow="hover" class="result-card" v-loading="predicting">
          <template #header>
            <div class="card-header">
              <span>预测结果</span>
            </div>
          </template>

          <div class="empty-result" v-if="!predictionResult.processed">
            <el-empty description="请在左侧输入客户信息并点击'进行预测'按钮"></el-empty>
          </div>

          <div class="prediction-result" v-else>
            <div class="result-header">
              <div class="customer-id">客户ID: {{ formData.customerID }}</div>
              <div class="prediction-time">预测时间: {{ predictionResult.time }}</div>
            </div>

            <!-- 风险仪表盘 -->
            <div class="risk-gauge">
              <div ref="gaugeChartRef" class="gauge-chart"></div>
            </div>

            <!-- 预测结论 -->
            <div class="prediction-conclusion">
              <div class="conclusion-title">预测结论</div>
              <div class="conclusion-content">
                <div class="risk-label" :class="getRiskClass()">
                  {{ getRiskLabel() }}
                </div>
                <div class="conclusion-text">
                  该客户有 <span class="highlight">{{ (predictionResult.probability * 100).toFixed(2) }}%</span> 的概率在近期流失。
                  {{ getRecommendationText() }}
                </div>
              </div>
            </div>

            <!-- 风险因素 -->
            <div class="risk-factors">
              <div class="factors-title">主要风险因素</div>
              <div class="factors-list">
                <div v-for="(factor, index) in predictionResult.factors" :key="index" class="factor-item">
                  <div class="factor-rank">{{ index + 1 }}</div>
                  <div class="factor-content">
                    <div class="factor-name">{{ factor.name }}</div>
                    <el-progress 
                      :percentage="factor.impact * 100" 
                      :color="getFactorColor(factor.impact)"
                      :stroke-width="8"
                      :show-text="false"
                    ></el-progress>
                    <div class="factor-value">{{ (factor.impact * 100).toFixed(0) }}%</div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 操作按钮 -->
            <div class="result-actions">
              <el-button type="primary" @click="createAlert">创建预警</el-button>
              <el-button type="success" @click="openRetentionDialog">制定挽留方案</el-button>
              <el-button type="warning" @click="savePrediction">保存结果</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
// 引入所需模块
import { ref, reactive, watch, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import * as echarts from 'echarts'
import { predictSingleCustomer, savePredictionResult, createChurnAlert } from '@/api/modules/prediction'

// 表单引用
const predictionForm = ref(null)
// 图表引用
const gaugeChartRef = ref(null)
// 存储图表实例
const gaugeChart = ref(null)

// 自动计算总费用
const autoTotalCharges = ref(true)

// 预测中状态
const predicting = ref(false)

// 表单数据
const formData = reactive({
  customerID: '',
  gender: 'Male',
  seniorCitizen: 0,
  partner: 'No',
  dependents: 'No',
  tenure: 0,
  phoneService: 'Yes',
  multipleLines: 'No',
  internetService: 'DSL',
  onlineSecurity: 'No',
  onlineBackup: 'No',
  deviceProtection: 'No',
  techSupport: 'No',
  streamingTV: 'No',
  streamingMovies: 'No',
  contract: 'Month-to-month',
  paperlessBilling: 'Yes',
  paymentMethod: 'Electronic check',
  monthlyCharges: 0,
  totalCharges: 0
})

// 表单验证规则
const formRules = {
  customerID: [
    { required: true, message: '请输入客户ID', trigger: 'blur' },
    { min: 3, max: 20, message: '客户ID长度应在3到20个字符之间', trigger: 'blur' }
  ],
  monthlyCharges: [
    { required: true, message: '请输入月费用', trigger: 'change' }
  ]
}

// 预测结果
const predictionResult = reactive({
  processed: false,
  probability: 0,
  riskLevel: '',
  time: '',
  factors: [],
  model: {}
})

// 监听月费用和使用时长的变化，自动计算总费用
watch([() => formData.monthlyCharges, () => formData.tenure], () => {
  if (autoTotalCharges.value) {
    formData.totalCharges = parseFloat((formData.monthlyCharges * formData.tenure).toFixed(2))
  }
})

// 填充演示数据
const fillDemoData = () => {
  Object.assign(formData, {
    customerID: 'CUST-' + Math.floor(10000 + Math.random() * 90000),
    gender: Math.random() > 0.5 ? 'Male' : 'Female',
    seniorCitizen: Math.random() > 0.7 ? 1 : 0,
    partner: Math.random() > 0.5 ? 'Yes' : 'No',
    dependents: Math.random() > 0.7 ? 'Yes' : 'No',
    tenure: Math.floor(Math.random() * 72),
    phoneService: Math.random() > 0.1 ? 'Yes' : 'No',
    multipleLines: Math.random() > 0.5 ? 'Yes' : 'No',
    internetService: ['DSL', 'Fiber optic', 'No'][Math.floor(Math.random() * 3)],
    contract: ['Month-to-month', 'One year', 'Two year'][Math.floor(Math.random() * 3)],
    paperlessBilling: Math.random() > 0.5 ? 'Yes' : 'No',
    paymentMethod: ['Electronic check', 'Mailed check', 'Bank transfer (automatic)', 'Credit card (automatic)'][Math.floor(Math.random() * 4)],
    monthlyCharges: Math.floor(Math.random() * 100 + 20)
  })
  
  // 设置依赖于互联网服务的选项
  if (formData.internetService !== 'No') {
    formData.onlineSecurity = Math.random() > 0.5 ? 'Yes' : 'No'
    formData.onlineBackup = Math.random() > 0.5 ? 'Yes' : 'No'
    formData.deviceProtection = Math.random() > 0.5 ? 'Yes' : 'No'
    formData.techSupport = Math.random() > 0.5 ? 'Yes' : 'No'
    formData.streamingTV = Math.random() > 0.5 ? 'Yes' : 'No'
    formData.streamingMovies = Math.random() > 0.5 ? 'Yes' : 'No'
  } else {
    formData.onlineSecurity = 'No internet service'
    formData.onlineBackup = 'No internet service'
    formData.deviceProtection = 'No internet service'
    formData.techSupport = 'No internet service'
    formData.streamingTV = 'No internet service'
    formData.streamingMovies = 'No internet service'
  }
  
  // 自动计算总费用
  if (autoTotalCharges.value) {
    formData.totalCharges = parseFloat((formData.monthlyCharges * formData.tenure).toFixed(2))
  }
  
  ElMessage({
    message: '已填充演示数据',
    type: 'success'
  })
}

// 提交表单
const submitForm = async () => {
  if (!predictionForm.value) return
  
  try {
    await predictionForm.value.validate()
    runPrediction()
  } catch (error) {
    ElMessage.error('表单验证失败，请检查输入')
  }
}

// 重置表单
const resetForm = () => {
  if (!predictionForm.value) return
  
  predictionForm.value.resetFields()
  predictionResult.processed = false
  
  // 重置计算方式
  autoTotalCharges.value = true
  
  // 重置依赖字段
  if (formData.internetService === 'No') {
    formData.onlineSecurity = 'No internet service'
    formData.onlineBackup = 'No internet service'
    formData.deviceProtection = 'No internet service'
    formData.techSupport = 'No internet service'
    formData.streamingTV = 'No internet service'
    formData.streamingMovies = 'No internet service'
  }
}

// 运行预测
const runPrediction = async () => {
  predicting.value = true
  
  try {
    // 调用后端API进行预测
    const response = await predictSingleCustomer(formData)
    
    // 处理预测结果
    if (response && response.code === 200) {
      // 更新预测结果
      predictionResult.processed = true
      predictionResult.probability = response.data.probability
      predictionResult.riskLevel = response.data.riskLevel
      predictionResult.time = formatDateTime(new Date())
      predictionResult.factors = response.data.factors || []
      predictionResult.model = response.data.model || {}
      
      // 预测完成后初始化图表
      nextTick(() => {
        initGaugeChart()
      })
      
      ElMessage({
        message: response.message || '预测完成',
        type: 'success'
      })
    } else {
      throw new Error(response.error || '预测失败')
    }
  } catch (error) {
    ElMessage.error(`预测失败: ${error.message || '未知错误'}`)
    console.error('预测错误:', error)
    
    // 如果API调用失败，可以使用模拟数据（仅开发阶段使用）
    generatePredictionResult()
    
    // 预测完成后初始化图表
    nextTick(() => {
      initGaugeChart()
    })
  } finally {
    predicting.value = false
  }
}

// 生成预测结果
const generatePredictionResult = () => {
  // 根据客户特征计算流失概率
  let probability = 0.1
  
  // 月付合同增加流失风险
  if (formData.contract === 'Month-to-month') {
    probability += 0.3
  }
  
  // 使用光纤服务增加流失风险
  if (formData.internetService === 'Fiber optic') {
    probability += 0.2
  }
  
  // 使用时长短增加流失风险
  if (formData.tenure < 12) {
    probability += 0.15
  }
  
  // 没有技术支持增加流失风险
  if (formData.techSupport === 'No') {
    probability += 0.1
  }
  
  // 月费用高增加流失风险
  if (formData.monthlyCharges > 80) {
    probability += 0.1
  }
  
  // 确保概率在0-1之间
  probability = Math.min(Math.max(probability, 0), 1)
  
  // 确定风险等级
  let riskLevel
  if (probability >= 0.7) {
    riskLevel = 'high'
  } else if (probability >= 0.4) {
    riskLevel = 'medium'
  } else {
    riskLevel = 'low'
  }
  
  // 生成风险因素
  const factorMap = {
    'Month-to-month': {
      condition: formData.contract === 'Month-to-month',
      name: '合同类型(月付)',
      impact: 0.35
    },
    'short_tenure': {
      condition: formData.tenure < 12,
      name: '使用时长短',
      impact: 0.25
    },
    'fiber': {
      condition: formData.internetService === 'Fiber optic',
      name: '互联网服务(光纤)',
      impact: 0.20
    },
    'no_tech': {
      condition: formData.techSupport === 'No',
      name: '无技术支持',
      impact: 0.12
    },
    'high_charge': {
      condition: formData.monthlyCharges > 80,
      name: '月费用高',
      impact: 0.10
    },
    'no_security': {
      condition: formData.onlineSecurity === 'No',
      name: '无在线安全服务',
      impact: 0.08
    },
    'no_backup': {
      condition: formData.onlineBackup === 'No',
      name: '无在线备份',
      impact: 0.05
    },
    'electronic_check': {
      condition: formData.paymentMethod === 'Electronic check',
      name: '支付方式(电子支票)',
      impact: 0.03
    }
  }
  
  // 筛选适用的风险因素
  const factors = []
  for (const key in factorMap) {
    if (factorMap[key].condition) {
      factors.push({
        name: factorMap[key].name,
        impact: factorMap[key].impact
      })
    }
  }
  
  // 按影响力排序
  factors.sort((a, b) => b.impact - a.impact)
  
  // 限制因素数量
  const topFactors = factors.slice(0, 5)
  
  // 更新预测结果
  predictionResult.processed = true
  predictionResult.probability = probability
  predictionResult.riskLevel = riskLevel
  predictionResult.time = formatDateTime(new Date())
  predictionResult.factors = topFactors
}

// 获取风险等级样式类
const getRiskClass = () => {
  if (!predictionResult.riskLevel) return ''
  return {
    'low': 'risk-low',
    'medium': 'risk-medium',
    'high': 'risk-high'
  }[predictionResult.riskLevel] || ''
}

// 获取风险等级标签
const getRiskLabel = () => {
  if (!predictionResult.riskLevel) return '未评估'
  return {
    'low': '低风险',
    'medium': '中风险',
    'high': '高风险'
  }[predictionResult.riskLevel] || '未评估'
}

// 获取风险因素颜色
const getFactorColor = (impact) => {
  if (impact < 0.1) return '#67c23a'
  if (impact < 0.2) return '#e6a23c'
  return '#f56c6c'
}

// 获取建议文本
const getRecommendationText = () => {
  if (predictionResult.riskLevel === 'high') {
    return '建议立即采取挽留措施。'
  } else if (predictionResult.riskLevel === 'medium') {
    return '建议密切关注并准备挽留方案。'
  } else {
    return '风险较低，建议定期关注。'
  }
}

// 创建预警
const createAlert = async () => {
  if (!predictionResult.processed) {
    ElMessage.warning('请先进行预测')
    return
  }
  
  try {
    await ElMessageBox.confirm(`确定为客户 ${formData.customerID} 创建流失预警吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    // 准备预警数据
    const alertData = {
      customerId: formData.customerID,
      modelId: predictionResult.model?.id,
      churnProbability: predictionResult.probability,  // 使用churnProbability字段名
      riskLevel: predictionResult.riskLevel,
      customerInfo: { ...formData },
      factors: predictionResult.factors
    }
    
    // 调用API创建预警
    const response = await createChurnAlert(alertData)
    
    if (response && response.code === 200) {
      ElMessage({
        message: `已为客户 ${formData.customerID} 创建流失预警`,
        type: 'success'
      })
    } else {
      throw new Error(response.error || '创建预警失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error(`创建预警失败: ${error.message || '未知错误'}`)
      console.error('创建预警错误:', error)
    }
  }
}

// 打开挽留方案对话框
const openRetentionDialog = () => {
  if (!predictionResult.processed) {
    ElMessage.warning('请先进行预测')
    return
  }
  
  ElMessage({
    message: '挽留方案功能将在后续版本中实现',
    type: 'info'
  })
}

// 保存预测结果
const savePrediction = async () => {
  if (!predictionResult.processed) {
    ElMessage.warning('请先进行预测')
    return
  }
  
  try {
    // 准备保存数据
    const saveData = {
      customerId: formData.customerID,
      modelId: predictionResult.model?.id,
      churnProbability: predictionResult.probability,  // 使用churnProbability字段名
      riskLevel: predictionResult.riskLevel,
      customerInfo: { ...formData },
      factors: predictionResult.factors
    }
    
    // 调用API保存预测结果
    const response = await savePredictionResult(saveData)
    
    if (response && response.code === 200) {
      ElMessage({
        message: response.message || '预测结果已保存',
        type: 'success'
      })
    } else {
      throw new Error(response.error || '保存失败')
    }
  } catch (error) {
    ElMessage.error(`保存失败: ${error.message || '未知错误'}`)
    console.error('保存错误:', error)
  }
}

// 初始化仪表盘图表
const initGaugeChart = () => {
  if (!predictionResult.processed) return

  nextTick(() => {
    if (gaugeChartRef.value) {
      const chartDom = gaugeChartRef.value
      const myChart = echarts.init(chartDom)
      
      const option = {
        series: [{
          type: 'gauge',
          startAngle: 180,
          endAngle: 0,
          min: 0,
          max: 100,
          splitNumber: 10,
          radius: '100%',
          axisLine: {
            lineStyle: {
              width: 20,
              color: [
                [0.3, '#67C23A'],
                [0.7, '#E6A23C'],
                [1, '#F56C6C']
              ]
            }
          },
          pointer: {
            icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
            length: '12%',
            width: 10,
            offsetCenter: [0, '-60%'],
            itemStyle: {
              color: 'auto'
            }
          },
          axisTick: {
            length: 8,
            lineStyle: {
              color: 'auto',
              width: 2
            }
          },
          splitLine: {
            length: 14,
            lineStyle: {
              color: 'auto',
              width: 2
            }
          },
          axisLabel: {
            color: '#999',
            fontSize: 10,
            distance: -38,
            formatter: function(value) {
              if (value === 100) {
                return '100%'
              } else if (value === 0) {
                return '0%'
              }
              return ''
            }
          },
          title: {
            offsetCenter: [0, '-20%'],
            fontSize: 14
          },
          detail: {
            fontSize: 30,
            offsetCenter: [0, '0%'],
            valueAnimation: true,
            formatter: function(value) {
              return value.toFixed(2) + '%'
            },
            color: 'inherit'
          },
          data: [{
            value: (predictionResult.probability * 100),
            name: '流失概率'
          }]
        }]
      }
      
      myChart.setOption(option)
      
      // 保存图表实例以便于后续更新
      gaugeChart.value = myChart
      
      // 确保图表随窗口大小调整
      window.addEventListener('resize', () => {
        if (gaugeChart.value) {
          gaugeChart.value.resize()
        }
      })
    }
  })
}

// 格式化日期时间
const formatDateTime = (date) => {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  const seconds = String(date.getSeconds()).padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}
</script>

<style lang="scss" scoped>
.single-prediction-container {
  padding: 20px;
  
  .page-header {
    margin-bottom: 20px;
    
    .page-title {
      font-size: 22px;
      font-weight: bold;
    }
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .form-card {
    margin-bottom: 20px;
    
    .auto-calc {
      margin-top: 5px;
      color: #909399;
      font-size: 12px;
    }
  }
  
  .result-card {
    height: 100%;
    
    .empty-result {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 400px;
    }
    
    .prediction-result {
      .result-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        
        .customer-id {
          font-weight: bold;
        }
        
        .prediction-time {
          color: #909399;
          font-size: 12px;
        }
      }
      
      .risk-gauge {
        height: 300px;
        margin-bottom: 20px;
        
        .gauge-chart {
          width: 100%;
          height: 100%;
        }
      }
      
      .prediction-conclusion {
        background-color: #f8f9fa;
        border-radius: 4px;
        padding: 15px;
        margin-bottom: 20px;
        
        .conclusion-title {
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 10px;
          color: #303133;
        }
        
        .conclusion-content {
          display: flex;
          align-items: center;
          
          .risk-label {
            padding: 5px 15px;
            border-radius: 15px;
            font-weight: bold;
            margin-right: 15px;
            
            &.risk-low {
              background-color: rgba(103, 194, 58, 0.2);
              color: #67c23a;
            }
            
            &.risk-medium {
              background-color: rgba(230, 162, 60, 0.2);
              color: #e6a23c;
            }
            
            &.risk-high {
              background-color: rgba(245, 108, 108, 0.2);
              color: #f56c6c;
            }
          }
          
          .conclusion-text {
            flex: 1;
            line-height: 1.5;
            
            .highlight {
              font-weight: bold;
              color: #f56c6c;
            }
          }
        }
      }
      
      .risk-factors {
        margin-bottom: 20px;
        
        .factors-title {
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 15px;
          color: #303133;
        }
        
        .factors-list {
          .factor-item {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            
            &:last-child {
              margin-bottom: 0;
            }
            
            .factor-rank {
              width: 24px;
              height: 24px;
              border-radius: 50%;
              background-color: #409eff;
              color: #fff;
              display: flex;
              justify-content: center;
              align-items: center;
              margin-right: 10px;
              font-weight: bold;
              font-size: 14px;
            }
            
            .factor-content {
              flex: 1;
              display: flex;
              align-items: center;
              
              .factor-name {
                width: 150px;
                margin-right: 15px;
              }
              
              .el-progress {
                flex: 1;
                margin-right: 10px;
              }
              
              .factor-value {
                width: 40px;
                text-align: right;
                font-weight: bold;
              }
            }
          }
        }
      }
      
      .result-actions {
        display: flex;
        justify-content: center;
        gap: 15px;
      }
    }
  }
  
  @media (max-width: 768px) {
    .result-card {
      margin-top: 20px;
    }
  }
}
</style> 